<h1>普通商品区域设置</h1>
<div class="row">
  <span class="label">组件名</span>
  <input nz-input placeholder="字母数字下划线组成，用于锚点" [disabled]="componentNameDisabled" [(ngModel)]="componentData.name"/>
</div>
<div class="row">
  <span class="label">上边距</span>
  <input nz-input placeholder="请输入上边距" [(ngModel)]="componentData.marginTop"/>
</div>
<div class="row">
  <span class="label">下边距</span>
  <input nz-input placeholder="请输入下边距" [(ngModel)]="componentData.marginBottom"/>
</div>
<nz-divider></nz-divider>

<div class="contentList">
  <div cdkDropList (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of componentData.content;let index = index" cdkDragBoundary=".contentList"
         style="display: flex;flex-direction: row;margin-bottom: 8px;background: white;align-items: center"
         [ngStyle]="{marginBottom: componentData.content.length===index+1?'0':'8px'}"
         cdkDrag>
      <div class="row">
        <span class="label">商品</span>
        <span style="display: inline-block;min-width: 160px">{{item['id']}}</span>
      </div>
      <button nzSize="small" nzDanger nz-button nzType="default"
              style="margin: 0 8px"
              nz-popconfirm
              nzPopconfirmTitle="确认要删除吗"
              (nzOnConfirm)="removeItem(index)"
              nzPopconfirmPlacement="left">
        <i nz-icon nzType="delete"></i>
      </button>
      <button nzSize="small" nz-button nzType="default">
        <a href=".#/goods/goodsTabs/{{item['id']}}"
           target="_blank">
          <i nz-icon nzType="eye"></i>
        </a>
      </button>
    </div>
  </div>
</div>

<div>
  <button nzSize="large" style="width: 100%;margin-top: 24px" nz-button nzType="default" (click)="showGoodsModal()">
    <i nz-icon nzType="plus"></i>
  </button>
</div>

<div class="footer">
  <!--  <div style="display: flex;justify-content: space-evenly">-->
  <!--    <button nz-button nzType="default" (click)="closeComponent.emit()">关闭</button>-->
  <!--    <button nz-button nzType="primary" (click)="saveBtn()">保存</button>-->
  <!--  </div>-->
  <div class="remark">
    <pre>
      规则说明：
      1.pc端每行5个商品，移动端每行2个商品，请留意匹配度。
      2.该组件依然会根据用户身份在前端显示商品，请注意。
    </pre>
  </div>
</div>


<nz-modal
  [nzVisible]="goodsModal.visible"
  [nzContent]="modalContent"
  nzWidth="1600px"
  [nzFooter]="null"
  (nzOnCancel)="hideGoodsModal()"
>
  <ng-template #modalContent>

    <nz-row>
      <div class="searchItem">
        <label>商品：</label>
        <input nz-input placeholder="请输入商品编码/名称" [(ngModel)]="query.name"/>
      </div>
      <div class="searchItem">
        <label>分类：</label>
        <nz-select [(ngModel)]="query.typeId" nzPlaceHolder="全部" [nzBackdrop]="true" nzAllowClear nzShowSearch>
          <nz-option [nzValue]="colour['id']" [nzLabel]="colour['name']"
                     *ngFor="let colour of goodsCategoryOptions"></nz-option>
        </nz-select>
      </div>
      <div class="searchItem">
        <label>品牌：</label>
        <nz-select [(ngModel)]="query.brandIds" nzPlaceHolder="全部" [nzBackdrop]="true" nzAllowClear nzShowSearch>
          <nz-option [nzValue]="colour['id']" [nzLabel]="colour['name']"
                     *ngFor="let colour of goodsBrandOptions"></nz-option>
        </nz-select>
      </div>
      <div class="searchItem">
        <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
        <button nz-button nzType="default" (click)="resetQuery()">重置</button>
      </div>
    </nz-row>
    <nz-row>
      <div class="searchItem">
        <button nz-button nzType="primary" (click)="addDevice()">添加已选中</button>
      </div>
    </nz-row>
    <!--表格-->
    <nz-table
      style="margin-top: 8px"
      #table
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzData]="goodsModal.records"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="goodsModal.total"
      [(nzPageIndex)]="query.current"
      [(nzPageSize)]="query.size"
      [nzFrontPagination]="false"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
      <tr>
        <th
          [(nzChecked)]="checked"
          [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="onAllChecked($event)"
        ></th>
        <th nzAlign="center">ID</th>
        <th nzAlign="center">商品编号</th>
        <th nzAlign="center">商品名称</th>
        <th nzAlign="center">商品分类</th>
        <th nzAlign="center">商品品牌</th>
        <th nzAlign="center">适用用户</th>
        <th nzAlign="center">商品状态</th>
<!--        <th nzAlign="center" nzWidth="80px">操作</th>-->
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of table.data;let index=index;" [ngClass]="{sold: data['status']===2}">
        <td [nzDisabled]="goodsModal.checkedIds.has(data['id'])"
          [nzChecked]="setOfCheckedId.has(data['id'])"
          (nzCheckedChange)="onItemChecked(data['id'], $event)">
        </td>
        <!-- id -->
        <td nzAlign="center">{{ data['id'] }}</td>
        <!-- 商品编号 -->
        <td nzAlign="center">{{ data['code'] }}</td>
        <!-- 商品名称 -->
        <td nzAlign="center">{{ data['name'] }}</td>
        <!-- 商品分类 -->
        <td nzAlign="center">{{ data['typeName'] }}</td>
        <!-- 商品品牌 -->
        <td nzAlign="center">{{ data['brandName'] }}</td>
        <!-- 适用用户 -->
        <td
          nzAlign="center">{{ data['userType'] == 0 ? '通用' : data['userType'] == 1 ? 'C端' : data['userType'] == 2 ? 'B端' : '-' }}</td>
        <!-- 商品状态 -->
        <td nzAlign="center">
          <span [ngStyle]="{'color': data['status'] == 1 ? '#87d068' : '#f50'}">
            {{ data['status'] == 0 ? '无效' : data['status'] == 1 ? '已上架' : '已下架' }}
          </span>
        </td>
        <!-- 操作 -->
<!--        <td nzAlign="center">-->
<!--          <a *ngIf="!goodsModal.checkedIds.has(data['id'])" (click)="addDevice(data)">选择</a>-->
<!--        </td>-->
      </tr>
      </tbody>
    </nz-table>
    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{total }} 条</ng-template>
  </ng-template>
</nz-modal>
